<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/fe' }">企业后台</el-breadcrumb-item>
      <el-breadcrumb-item>公司基本信息</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 中间卡片视图 -->
    <el-card>
      <!-- 基本输入框 -->
      <el-form
        :model="saveForm"
        :rules="saveFormRules"
        ref="saveFormRef"
        label-width="150px"
        :inline="true"
      >
        <el-form-item label="公司网站">
          <el-input v-model="saveForm.com" placeholder="www.haha.com"></el-input>
        </el-form-item>
        <el-form-item label="成立时间">
          <el-input v-model="saveForm.time" placeholder="2000-01-21"></el-input>
        </el-form-item>
        <el-form-item label="公司规模">
          <el-input v-model="saveForm.scale" placeholder="5000人"></el-input>
        </el-form-item>

        <el-form-item label="注册资金">
          <el-input v-model="saveForm.money" placeholder="300000元"></el-input>
        </el-form-item>
        <el-form-item label="公司类型">
          <el-input v-model="saveForm.typ" placeholder="网络公司"></el-input>
        </el-form-item>
        <el-form-item label="法人代表">
          <el-input
            v-model="saveForm.standard"
            placeholder="赵四"
          ></el-input>
        </el-form-item>
        <el-form-item label="公司电话">
          <el-input v-model="saveForm.tell" placeholder="10086"></el-input>
        </el-form-item>
        <el-form-item label="联系人">
          <el-input v-model="saveForm.people" placeholder="王麻子"></el-input>
        </el-form-item>
        <!-- 添加照片 -->
        <div>
          <el-form-item label="照片">
            <a-upload
              name="avatar"
              list-type="picture-card"
              class="avatar-uploader"
              :show-upload-list="false"
              action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
              :before-upload="beforeUpload"
              @change="handleChange"
            >
              <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
              <div v-else>
                <a-icon :type="loading ? 'loading' : 'plus'" />
                <div class="ant-upload-text">Upload</div>
              </div>
            </a-upload>
          </el-form-item>
        </div>
        <el-form-item label="经营范围">
          <el-input
            type="textarea"
            :rows="5"
            :cols="60"
            placeholder="网络检索，视频，贴吧"
            v-model="saveForm.textarea"
          >
          </el-input>
        </el-form-item>
      </el-form>

      <!-- 按钮 -->
      <div class="btns">
        <el-button type="primary" :plain="true" @click="open1">保存</el-button>
        <el-button type="success" :plain="true" @click="open2">修改</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
function getBase64(img, callback) {
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result))
  reader.readAsDataURL(img)
}
export default {
  data() {
    return {
      //保存列表
      saveForm: {
        com: '',
        time: '',
        scale: '',
        money: '',
        typ: '',
        standard: '',
        tell: '',
        people: '',
        round: '',
        textarea: '',
      },
      // 保存规则
      saveFormRules: {
        com: [
          {
            required: true,
            message: '请输入公司网站',
            trigger: 'blur',
          },
        ],
        time: [
          {
            required: true,
            message: '请输入创建时间',
            trigger: 'blur',
          },
        ],
        scale: [
          {
            required: true,
            message: '请输入公司规模',
            trigger: 'blur',
          },
        ],
        money: [
          {
            required: true,
            message: '请输入注册资金',
            trigger: 'blur',
          },
        ],
        typ: [
          {
            required: true,
            message: '请输入公司类型',
            trigger: 'blur',
          },
        ],
        standard: [
          {
            required: true,
            message: '请输入法人代表',
            trigger: 'blur',
          },
        ],
        round: [
          {
            required: true,
            message: '请输入营业范围',
            trigger: 'blur',
          },
        ],
      },
      loading: false,
      imageUrl: '',
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!')
    },

    handleChange(info) {
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if (info.file.status === 'done') {
        getBase64(info.file.originFileObj, (imageUrl) => {
          this.imageUrl = imageUrl
          this.loading = false
        })
      }
    },
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJpgOrPng) {
        this.$message.error('You can only upload JPG file!')
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!')
      }
      return isJpgOrPng && isLt2M
    },
    open1() {
      this.$message({
        message: '信息已保存',
        type: 'success',
      })
    },
    open2() {
      this.$message({
        message: '信息可修改',
        type: 'warning',
      })
    },
  },
}
</script>

<style lang="less" scoped>
div {
  font-size: 14px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  top: 300px;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
.btns {
  display: flex;
  justify-content: center;
  margin-top: 25px;
  .el-button {
    margin-right: 50px;
  }
}
.round {
  margin-left: 150px;
  width: 400px;
}

/* 全局样式 */
html,body,#app{
    height: 100%;
    margin: 0;
    padding: 0;
}
.el-breadcrumb {
    padding-bottom: 15px;
    font-size: 13px;
}
.el-table {
    margin-top: 15px;
}
.el-pagination {
    margin-top: 15px;
}
.el-carousel {
    margin-top: 15px;
}

</style>